<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <%include("/common/header.html",{title:''}){}%>
    <title>视频监控</title>
    <base href="${ctxPath}/">
    <link rel="stylesheet" type="text/css" href="css/cloud-admin.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IENn7ABARjQIkTeAKyh80VTkg2jYXf3K"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        body {
            margin: 0;
            background-color: #ffffff;
        }

        #myPlayer {
            max-width: 1200px;
            width: 100%;
            height: 500px;
        }

        #myPlayer1 {
            max-width: 1200px;
            width: 100%;
            height: 500px;
        }

        #myPlayer2 {
            max-width: 1200px;
            width: 100%;
            height: 500px;
        }

        #myPlayer3 {
            max-width: 1200px;
            width: 100%;
            height: 500px;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<!--<script type="text/javascript" src="js/AlCommon/handleLocalStorage.js"></script>-->
<!--<script type="text/javascript" src="js/AlCommon/IsEnpt.js"></script>-->
<body>


<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">首页</a><span lay-separator="">/</span>
        <a href="javascript:">弱电系统</a><span lay-separator="">/</span>
          <a href="javascript:">视频监控</a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3"></i>
    </a>
</div>



<br>
<br>

<div class="container" style="width: 100%;background-color: #ffffff;float: left">
    <div class="row" style="background-color: #ffffff">
        <div id="content" class="col-lg-12" style="background-color: #ffffff">

            <!-- EXPORT TABLES -->
            <div class="row"  >

                <div class="col-md-4" id="videolists">
                    <div class="form-group">
                        <br>
                        <label class="col-sm-3 control-label">选择区域:</label>
                        <select class="form-control">
                            <option>
                                东部
                            </option>
                            <option>
                                西部
                            </option>
                        </select>
                    </div>
                    <div class="panel panel-default" v-cloak>
                        <div class="panel-body orders">
                            <div class="scroller" data-height="480" data-always-visible="1" data-rail-visible="1">
                                <ul class="list-unstyled">
                                    <li class="clearfix"  v-for="(value,index) in video" @click="selectvideo(index)">
                                        <div class="pull-left">
                                            <p>
                                            <h5 :title="value.deviceName"><strong>{{value.deviceName}}</strong>     {{value.deviceVersion}}</h5>
                                            </p>
                                            <p><i class="fa fa-clock-o"></i> <abbr class="timeago" :title="value.deviceName" v-text="value.deviceName"></abbr>
                                            </p>

                                        </div>
                                        <div class="text-right pull-right">
                                            <h5 class="cost">{{value.status==0?"不在线":"在线"}}</h5>
                                            <p v-if="value.deviceType!='CS-C5C-3B1WFR'">
                                                <a @click="linkeQ(value.deviceName,value.deviceSerial)">
                                                    <span class="label label-success arrow-in-right"><i
                                                            class="fa   fa-cloud"></i> 云台</span>
                                                </a>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-8">
                    <!-- BOX -->
                    <div class="box">

                        <div class="box-body">
                            <ul class="pricing_table row" id="iframvideo">

                            </ul>
                        </div>
                    </div>
                    <!-- /BOX -->
                </div>
            </div>

        </div>
        <!-- /CONTENT-->
    </div>
</div>


<div class="modal fade" id="box-visitmtle1" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="box border green">
            <div class="box-title">
                <h4>
                    <i class="fa fa-bars"></i> 设备<span id="vname"></span>-视频
                </h4>
                <div class="tools hidden-xs">
                    <a href="javascript:" class="reload"> <i
                            class="fa fa-refresh"></i> </a>
                    <a href="javascript:" data-dismiss="modal"> <i
                            class="fa fa-times"></i> </a>
                </div>
            </div>
            <div class="box-body big">
                <div id="video1" style="width:100%;height:400px"></div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="box-visitmtle2" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="box border green">
            <div class="box-title">
                <h4>
                    <i class="fa fa-bars"></i> 设备<span id="vname"></span>-视频
                </h4>
                <div class="tools hidden-xs">
                    <a href="javascript:" class="reload"> <i
                            class="fa fa-refresh"></i> </a>
                    <a href="javascript:" data-dismiss="modal"> <i
                            class="fa fa-times"></i> </a>
                </div>
            </div>
            <div class="box-body big">
                <div id="video2" style="width:100%;height:400px"></div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="box-visitmtle3" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="box border green">
            <div class="box-title">
                <h4>
                    <i class="fa fa-bars"></i> 设备<span id="vname"></span>-视频
                </h4>
                <div class="tools hidden-xs">
                    <a href="javascript:" class="reload"> <i
                            class="fa fa-refresh"></i> </a>
                    <a href="javascript:" data-dismiss="modal"> <i
                            class="fa fa-times"></i> </a>
                </div>
            </div>
            <div class="box-body big">

                <div id="video3" style="width:100%;height:400px"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="box-visitmtle4" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="box border green">
            <div class="box-title">
                <h4>
                    <i class="fa fa-bars"></i> 设备<span id="vname"></span>-视频
                </h4>
                <div class="tools hidden-xs">
                    <a href="javascript:" class="reload"> <i
                            class="fa fa-refresh"></i> </a>
                    <a href="javascript:" data-dismiss="modal"> <i
                            class="fa fa-times"></i> </a>
                </div>
            </div>
            <div class="box-body big">

                <div id="video4" style="width:100%;height:400px"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<%include("/common/foot.html"){}%>

<script type="module">


    window.onload = function () {
        var date1 = new Date();
        var s1 = date1.getTime(), s2 = handleLocalStorage("get",'sessionTime');
        var total = (s1 - s2) / 1000;
        var day = parseInt(total / (24 * 60 * 60));

        if (isEmpty(handleLocalStorage("get",'videoaccessToken')) || isEmpty(handleLocalStorage("get",'sessionTime')) || day > 3) {
            $.ajax(
                {
                    //请求方式
                    type: 'POST',
                    //发送请求的地址
                    url: 'https://open.ys7.com/api/lapp/token/get',
                    //服务器返回的数据类型
                    dataType: 'json',
                    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
                    data: {
                        "appKey": '45a4d5c6aece4178818da135ed84dbaf',
                        "appSecret": '670fcd955873dc253b106213df288a5b'
                    },
                    success: function (data) {
                        handleLocalStorage("set", 'videoaccessToken', data.data.accessToken);
                        handleLocalStorage("set", 'sessionTime', new Date().getTime());
                        //请求成功函数内容
                    },
                    error: function (jqXHR) {
                        //请求失败函数内容
                    }
                }
            );
        }
        var app = new Vue({
            el : '#videolists',
            data : {
                video : [],
                qiuji : '../image/jiankong.png',
                qiangji : '../image/qiuji.png'
            },
            created : function() {
                $.ajax(
                    {
                        //请求方式
                        type: 'POST',
                        //发送请求的地址
                        url : 'https://open.ys7.com/api/lapp/device/list',
                        //服务器返回的数据类型
                        dataType: 'json',
                        //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
                        data: {
                            "accessToken" : handleLocalStorage("get",'videoaccessToken')
                        },
                        success: function (data) {
                            for (var i = 0; i < data.data.length; i++) {
                                app.video.push(data.data[i]);
                                var html = `<iframe
                        src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/\${data.data[i].deviceSerial}/1.live&autoplay=1&accessToken=\${handleLocalStorage("get",'videoaccessToken')}"
                        width="300"
                        height="300"
                        id="ysOpenDevice\${i}"
                        allowfullscreen>
                            </iframe>`;

                                $("#iframvideo").append(html);

                            }
                            //请求成功函数内容
                        },
                        error: function (jqXHR) {
                            //请求失败函数内容
                        }
                    }
                );

            },
            methods : {
                selectvideo :function(i){
                    $("#iframvideo").find("iframe").hide();
                    $("#ysOpenDevice"+i+"").show();
                },
                linkeQ:function(deviceName,deviceSerial){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.open({
                            type: 2,
                            area: ['800px', '500px'],
                            fix: false, //不固定
                            maxmin: true,
                            shadeClose: false,
                            shade:0.4,
                            title: "云台",
                            content: 'base/link/@/video/viow.jhtml'
                        });
                    });

                },
                openWin : function(Serial,deviceType) {
                    api.openWin({
                        name : 'videos/video_window',
                        url : 'videos/video_window.html',
                        bounces : false,
                        vScrollBarEnabled : false,
                        animation : {
                            type : 'push',
                            subType : "from_right",
                            duration : "500"
                        },
                        pageParam : {
                            deviceSerial :Serial,
                            deviceType :deviceType
                        }
                    });
                }
            }
        });


    };




    function handleLocalStorage(method, key, value) {
        switch (method) {
            case 'get' : {
                let temp = window.localStorage.getItem(key);
                if (temp) {
                    return temp
                } else {
                    return false
                }
            }
            case 'set' : {
                window.localStorage.setItem(key, value);
                break
            }
            case 'remove': {
                window.localStorage.removeItem(key);
                break
            }
            default : {
                return false
            }
        }
    }


    function isEmpty(v) {
        switch (typeof v) {
            case 'undefined':
                return true;
            case 'string':
                if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0)
                    return true;
                break;
            case 'boolean':
                if (!v)
                    return true;
                break;
            case 'number':
                if (0 === v || isNaN(v))
                    return true;
                break;
            case 'object':
                if (null === v || v.length === 0)
                    return true;
                for (var i in v) {
                    return false;
                }
                return true;
        }
        return false;
    }
</script>
</body>

</html>
